<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\LinkPager;
use yii\widgets\Pjax;
use yii\data\Pagination;
use app\modules\cruise\models\Cruise;
use app\modules\cruise\models\RoomDownload;



$cruise = Cruise::findOne($cruise_id); 
$query = RoomDownload::find()->where(['cruise_id'=>$cruise_id]);
$count =$query->count();

$pages = new Pagination(['totalCount' =>$count,'pagesize'=>10]);
$ord_arr = $query->offset($pages->offset)
    ->limit($pages->limit)
    ->all();

//名单模板
$template = yii::$app->params['template_2'];    

$this->title =  $cruise->name;
$this->params['breadcrumbs'][] = $this->title;
?>
<style type="text/css">
    
    .room-ul label{
        color: #FFF;
        font-weight: normal;
        margin-left: 15px;
        margin-bottom: 10px; 
        display: inline-block;
        max-width: 100%;
        cursor: pointer;
    }
    .room-ul label span{

        background: #3e97eb;
        filter: alpha(opacity=90);
        opacity: 0.9;
        padding: 3px 0px 3px 10px;
    }
    .room-ul label i{
        background: #3e97eb;
        padding: 0px 10px 0px 0px;
    }

    #Pagination {
        padding:20px 0;
        display: inline-block;
    }
    .pageBtn a {
        display: inline-block;
        border: 1px solid #aaa;
        padding: 2px 5px;
        margin : 0 3px;
        font-size: 13px;
        background: #ECECEC;
        color: black;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 3px;
    }
    .pageBtn-selected a {
        display: inline-block;
        border: 1px solid #A664A6;
        padding: 2px 5px;
        margin : 0 3px;
        font-size: 13px;
        background: #A664A6;
        color: white;
        text-decoration: none;
        -moz-border-radius: 2px;
        -webkit-border-radius: 3px;
    }
    .pageBtn a:hover {
        background: #A664A6;
        border: 1px solid #A664A6;
        color: #fff;
        cursor: pointer;
    }
</style>

<?=  yii\web\View::registerCssFile("/css/magic-check.css",['depends' => 'app\assets\AppAsset']) ?>

<div class="room-code-product-index">

    <input type="hidden" type="cruise_id" name="cruise_id" id="cruise_id" value="<?=$cruise_id?>">
    <input type="hidden" value="<?php echo Yii::$app->getRequest()->getCsrfToken(); ?>" name="_csrf" id="_csrf" />

    <h2 class="page-header"><small><?= Html::encode($this->title) ?> </small>
          
    </h2>
    <div id="old-excel">
    <?php Pjax::begin(); ?>
    <div class="panel panel-body">
        <div class="panel-heading">
           下载列表
        </div> 
        <div class="panel-body">
           <?php if($ord_arr){ ?>
            <table class="table">
                <thead>
                    <tr><th>名称</th> <th>次数</th><th>模板名称</th><th>时间</th> <th></th> </tr>
                </thead>
                <tbody>
                    <?php foreach($ord_arr as $ord){ ?>
                        <tr>
                            <td><?=$ord->name?></td>
                            <td><?=$ord->num?></td>
                            <td><?=isset(\yii::$app->params['template_2'][$ord->template_id]) ? \yii::$app->params['template_2'][$ord->template_id]:'' ?></td>
                            <td><?=$ord->down_time?></td>
                            <td><a class="download-excel"  data-name="<?=$ord->name.'.xlsx'?>"  data-url="<?=$ord->path?>">下载</a></td>
                        </tr>    
                    <?php }?>
                </tbody>
            </table>
           <?php } ?>
            
        </div>  
        <div>
            <?= LinkPager::widget([ 
            'pagination' => $pages, 
            'nextPageLabel' => '下一页', 
            'prevPageLabel' => '上一页', 
        ]   ); ?>
        </div>   
    </div>

    <?php Pjax::end(); ?></div>
    <div class="panel panel-body room-list">
        <div class="panel-heading">
            所选房间
            <div class="pull-right">
            <button class="btn btn-success" id="down-load">下载</button>
            </div>  
        </div>    
        <div class="room-ul"></div>
    </div>    

    <div class="form-inline">
        <div class="form-group">
            <input type="text" id="code" class="form-control" placeholder="房间号">
        </div>  
        <div class="form-group">
            <select class="form-control" id="select_id">
                <option value="-1">选择</option>
                <option value="0">未下载</option>
                <option value="1">已修改</option>
                <option value="2">已下载</option>
            </select>
        </div>    
        <div class="form-group">
            <button type="submit" class="btn btn-primary" id="select">查询</button> 
        </div>  
    </div>    
   


    <table class="table" style="margin-top:15px;font-size:12px;">
        <thead><tr><th><input class="magic-checkbox room_all" type="checkbox" id="room_all"  ><label for="room_all"  style="display:inline;" title="选择所有该房间">全选</label></th><th>房间号</th><th>房间名称</th><th>房间入住人 </th><th>房间ID</th> <th>状态</th> </tr>
               <tr id="loadgif" style="text-align: center;" > 
                <td colspan="6">
　　              <img  alt="加载中..." src="/img/loading.gif"/>
                </td>
               </tr>
        </thead>
       
        <tbody class="table-body" id="table-body">
             
        </tbody>
    </table>

    <div class="dw">
        <div id="Pagination"><!--这里添加分页按钮栏--></div>
    </div>
</div>

<div class="modal fade log-modal"   role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog " role="document" style="width:740px;">
      <div class="modal-content">
            <!-- 嵌入内容 --> 
      </div>
  </div>
</div>

<!-- 选择游轮模板名单 -->
<div class="modal fade product-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog " role="document">
      <div class="modal-content">
           
            <ul class="list-group">
                <li class="list-group-item" style="background-color:#666;color:#FFF;">选择名单模板</li>
                <?php foreach($template as $k=>$v){ ?>
                <li class="list-group-item"><label><input type="radio" name="template_id" value="<?= $k?>"> <?= $v ?></label></li>
                <?php } ?>
                <li class="list-group-item"><button class="btn btn-primary" id="create">确定 </button></li>
            </ul>
            
      </div>
  </div>
</div>

<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">
// 清除模态框缓存
$(".log-modal").on("hidden.bs.modal", function() {
    $(this).removeData("bs.modal");
});

$("#down-load").click(function(){
    $('.product-modal').modal('show');
});

//下载excel 
$("#create").click(function(){
    var all_select_room = new Array();
    $(".remove-label").each(function(){
        all_select_room.push($(this).data('id'));
    });
    var template_id = $("input[name='template_id']:checked").val();
    if(!template_id){
        alert("未选择名单模板");
        return false;
    }
    if(all_select_room.length <= 0){
        alert("没有选择房间");
        return false;
    }
    var _csrf = $("#_csrf").val();
    var cruise_id = $("#cruise_id").val();

    $.ajax({
       type: "POST",
       async:false, 
       url: "/cruise/room-use/excel",
       data: {"_csrf":_csrf,"room":all_select_room,"cruise_id":cruise_id,"template_id":template_id},
       success: function(msg){
           var res = $.parseJSON(msg);
           if(res.status == 0){
               alert("生成团队名单失败");
               return false;
           }else if(res.status == 1){
                var href = "/cruise/room-use/download-file?name="+res.data.down_name+"&url="+res.data.down_url;
                window.open(href);
                window.location.reload();
           }

       }
    });
});

//下载old excel 
$("#old-excel").on("click",".download-excel",function(){
    var down_name = $(this).data("name");
    var down_url = $(this).data("url");
    var href = "/cruise/room-use/download-file?name="+down_name+"&url="+down_url;
    window.open(href);             
});


$("#table-body").on("click",".room-magic",function(){
    var id = $(this).data('id');
    var checked = $(this).is(':checked');
    if(checked){
        var html = '<label class="remove-label" data-id="'+id+'" ><span>'+id+' &nbsp;<i class="glyphicon glyphicon-remove"></i></label></span>';
        $(".room-ul").append(html);
    }else{
        var remove = $(".remove-label[data-id='"+id+"']");
        remove.remove();
    }
    
});

$(".room-ul").on("click",".remove-label",function(){
    var id = $(this).data('id');
    var _magic = $(".magic-checkbox[data-id='"+id+"']"); 
    _magic.removeAttr("checked");
    $(this).remove();
});

$(".room_all").click(function(){
    var checked = $(this).is(':checked');
    
    if(checked){
        $(".room-magic").each(function(){
            var id = $(this).data('id');
            var r_label = $(".remove-label[data-id='"+id+"']");
            if(r_label.length == 0){
                var html = '<label class="remove-label" data-id="'+id+'" ><span>'+id+' &nbsp;<i class="glyphicon glyphicon-remove"></i></label></span>';
                $(".room-ul").append(html);
            }

            $(this).prop("checked",true);  // attr 第三次会失败
        });
    }else{
        $(".room-magic").each(function(){
            var id = $(this).data('id');
            var r_label = $(".remove-label[data-id='"+id+"']");
            if(r_label.length > 0){
                r_label.remove();
            }

            $(this).prop("checked", false);
        });
    }
    
});

var curPage;        //当前页数
var totalItem;      //总记录数
var pageSize;       //每一页记录数
var totalPage;      //总页数

//分页
function getPageBar()
{
  if(curPage > totalPage) {
      curPage = totalPage;
  }
  if(curPage < 1) {
      curPage = 1;
  }
 
  pageBar = "";
 
  //如果不是第一页
  if(curPage != 1){
        pageBar += "<span class='pageBtn'><a data-page='1' class='pageClick' >首页</a></span>";
        pageBar += "<span class='pageBtn'><a data-page='"+(curPage-1)+"' class='pageClick'> < </a></span>";
  }
 
  //显示的页码按钮(5个)
  var start,end;
  if(totalPage <= 5) {
    start = 1;
    end = totalPage;
  } else {
    if(curPage-2 <= 0) {
        start = 1;
        end = 5;
    } else {
        if(totalPage-curPage < 2) {
            start = totalPage - 4;
            end = totalPage;
        } else {
            start = curPage - 2;
            end = curPage + 2;
        }
    }
  }
 
  for(var i=start;i<=end;i++) {
    if(i == curPage) {
        pageBar += "<span class='pageBtn-selected'><a data-page='"+i+"' class='pageClick' >"+i+"</a></span>";
    } else {
        pageBar += "<span class='pageBtn'><a data-page='"+i+"' class='pageClick' >"+i+"</a></span>";
    }
  }
   
  //如果不是最后页
  if(curPage != totalPage && curPage != 1){
        pageBar += "<span class='pageBtn'><a data-page='"+(parseInt(curPage)+1)+"' class='pageClick' > > </a></span>";
        pageBar += "<span class='pageBtn'><a data-page='"+totalPage+"' class='pageClick' >尾页</a></span>";
  }
     
  $("#Pagination").html(pageBar);
}

$("#Pagination").on("click",".pageClick",function(){
    var page = $(this).data('page');
    ajaxData(page);
});

//ajax加载数据
function ajaxData(page){
    var code = '';
    var download = '';
    
    code = $("#code").val();
    download = $("#select_id").val();
    
    $.get("/cruise/room-use/get-list",{code:code,download:download,pageNum:page},function(data){
        totalItem = data.totalItem;
        pageSize = data.pageSize;
        curPage = page;
        totalPage = data.totalPage;
        var data_content = data.data_content;
        var all_select_room = new Array();
        $(".remove-label").each(function(){
            all_select_room.push($(this).data('id'));
        });
        if(data_content){
            var html = '';
            $.each(data_content,function(i,item){
                html += '<tr>';
                var isIn = $.inArray(item.id,all_select_room);
                html += '<td class="col-md-1"><input class="magic-checkbox room-magic" type="checkbox" id="room_'+item.id+'" data-id="'+item.id+'" '+(isIn>=0?"checked='checked'":'')+' ><label for="room_'+item.id+'"  style="display:inline;" title="选择该房间"></label></td>';
                html += '<td class="col-md-2">'+item.code+'</td>';
                html += '<td class="col-md-2">'+item.name+'</td>';
                html += '<td class="col-md-2">';
                if(item.customers){
                    $.each(item.customers,function(r,icustomers){

                        html += '/ <a class="show-customer" href="/cruise/customer/get-message?id='+icustomers.id+'"  data-toggle="modal" data-target=".log-modal" >'+icustomers.name+'</a>';
                        
                    });
                }
                html += '</td>';
                html += '<td class="col-md-1">'+item.id+'</td>';
                html += ' <td class="col-md-2">'+item.download+'</td>';
                html += '</tr>';
            });
           
            $("#table-body").empty();
            $("#table-body").append(html);
            $("#loadgif").hide();
            getPageBar();
        }else{
            $("#loadgif").hide();
        }
    });
}
//初始化
ajaxData(1);

$("#select").click(function(){
    $("#table-body").empty();
    $("#loadgif").show();
    $("#Pagination").empty();
    ajaxData(1);
});

</script>
<?php app\components\JsBlock::end() ?>   

